<script setup>
import {ref, reactive, onBeforeMount} from "vue";

const dataList = reactive([])
const page = reactive({page: 1, pageSize: 10, total: 0})

const listData = async () => {
//     todo 调用接口返回数据
    const result = {
        data: [
            {
                "name": "weather",
                "command": "node",
                "args": ["E:\\Projects\\MCP\\node_mcp\\weather-server\\build\\index.js"],
                "env": {
                    "OPENWEATHER_API_KEY": "your-api-key",
                },
                "server_type": "local",
            },
            {
                "name": "terminal-mcp-server",
                "command": "node",
                "args": ["E:\\Projects\\MCP\\node_mcp\\terminal-mcp-server\\build\\index.js"],
                "server_type": "local",
            },
            {
                "name": "node-browser-use-mcp-server",
                "url": "http://127.0.0.1:3002/sse",
                "server_type": "online",
            }
        ],
        page: 1,
        pageSize: 10,
        total: 3
    }
    page.total = result.total
    page.page = result.page
    page.pageSize = result.pageSize
    dataList.splice(0, dataList.length, ...result.data)

    return result
}
const handleSizeChange = async (page) => {
    await listData()
}
const handleCurrentChange = async (page) => {
    await listData()
}

onBeforeMount(() => {
    listData()
})
</script>

<template>
    <el-table :data="dataList" stripe border>
        <el-table-column prop="name" label="服务名称" width="300px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="server_type" label="服务类型" width="100px">
            <template v-slot:default="scope">
                <el-tag :type="scope.row.server_type==='local'?'primary':'success'">{{scope.row.server_type}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="command" label="服务命令" width="100px"></el-table-column>
        <el-table-column prop="args" label="服务参数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="env" label="环境变量" show-overflow-tooltip width="200px"></el-table-column>
        <el-table-column prop="url" label="服务地址" show-overflow-tooltip width="200px"></el-table-column>
        <el-table-column label="操作" width="100px">
            <template v-slot:default="scope">
                <el-button size="small" link type="warning">编辑</el-button>
                <el-button size="small" link type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="page.page"
        v-model:page-size="page.pageSize"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="page.total"></el-pagination>
</template>

<style scoped lang="scss">

</style>